<!DOCTYPE html>
<html>
  <head>
    <title>NES EMU</title>
    <link href="style.css" rel="stylesheet" type="text/css"/> 
    <script src="lib/flexcroll.js" type="application/x-javascript"></script> 
    <script src="lib/tabbar.min.js" type="application/x-javascript"></script> 
    <!-- <script src="lib/jquery.min.js" type="application/x-javascript"></script>  -->
    <script src="src/memory.js" type="application/x-javascript"></script> 
    <script src="src/cpu.js" type="application/x-javascript"></script> 
    <script src="src/ppu.js" type="application/x-javascript"></script> 
    <script src="src/mapper.js" type="application/x-javascript"></script> 
    <script src="src/rom.js" type="application/x-javascript"></script> 
    <script src="src/joypad.js" type="application/x-javascript"></script> 
    <script src="src/video.js" type="application/x-javascript"></script> 
    <script src="src/system.js" type="application/x-javascript"></script> 
    <script src="src/debug.js" type="application/x-javascript"></script> 

    <script type="application/x-javascript">
      function scale_screen() {
        var bx = document.getElementById("BX");
        if (bx.value=='Scale 2x') {
          bx.value='Scale 1x';
          canvas.style.width = "512px";
          canvas.style.height = "480px";
        } else {
          bx.value='Scale 2x';
          canvas.style.width = "256px";
          canvas.style.height = "240px";
        }
      }
    </script>
  </head>
  <body>
    <div id="main">
      <h1>NES EMU</h1>
      <canvas id="screen" width="256" height="240"></canvas> <br/>
      <div id="status">Not Running</div> 
      <!-- <select id="cartridge" rows="1"> -->
      <!-- 	<OPTION value="tank.nes" selected="selected">Battle City</OPTION> -->
      <!-- 	<OPTION value="contra.nes">Contra</OPTION> -->
      <!-- </select><br/> -->
      <input type='file' id='cartridge' style="width:0px;height:0px;" onchange="System.loadRom()"/>
      <input id="BR" type="button" value="Run" onclick="document.getElementById('cartridge').click();" onfocus="this.blur();" /> 
      <input id="BP" type="button" value="Pause" onfocus="this.blur();" disabled /> 
      <input id="BS" type="button" value="Step"  onfocus="this.blur();" /> 
      <input id="BS" type="button" value="Reset"  onfocus="this.blur();" /> 
      <input id="BX" type="button" value="Scale 2x" onfocus="this.blur();" onclick = "scale_screen();"/> 
      <br/> 
    </div>

    <div id="debugger">
      <div id="rom" class="flexcroll">
	<div id="rom-cont"></div>
      </div>

      <div id="mem" class="tabber"> 
	<div class="tabbertab" title="Shadow">
	  <div class="flexcroll">
	    <div id="cont"></div>
	  </div>
	</div>

	<div class="tabbertab" title="Disassemble">
	  <div class="flexcroll">
	    <div id="cont"></div>
	  </div>
	</div>
      </div>

      <div id="cpu" class="flexcroll"></div>

      <div id="rominfo">
	<div id="rominfo-cont"></div>
      </div>
    </div>
  </body>
    <script>
      init_video();
    </script>
</html>
